import React, { Component } from 'react'

import axios from 'axios'

import {connect} from 'react-redux'

import {IProduct} from '../../../types/product'

import Product from '../../../components/product'



import './index.scss';

interface IProps{
    initList:(list:IProduct[]) => void,
    list:IProduct[],
    history:any
}

interface IState{}

class Home extends Component<IProps,IState> {
    componentDidMount(){
        axios.get('/api/list').then(res => {
            this.props.initList(res.data.list);
        })
    }
    render() {
        let {list} = this.props;
        return (
            <div className="list">
                <button onClick={this.goDetail}>跳详情</button>
                {list.length && list.map((item:IProduct) => <Product item={item} key={item.id}></Product>)}
            </div>
        )
    }

    goDetail = () => {
        this.props.history.push('/detail')
    }
}

let stateMapToProps = (state:any) => {
    return {
        list:state.list.list
    }
}

let dispatchMapToProps = (dispatch:any) => {
    return {
        initList(list:IProduct[]){
            dispatch({type:'INIT_LIST',list})
        }
    }
}

export default connect(stateMapToProps,dispatchMapToProps)(Home)